<template>
    <div class="report-three">
        <div class="header"></div>
        <div class="body">
            <h4>
                <span>03</span>难易度情况
            </h4>
            <ul class="list">
                <li>
                    <div class="level">难度等级：低档题</div>
                    <div class="ratio">
                        <div id="liquid-fill-low" :style="{width:'45%',height:'18vh'}"></div>
                        <!-- <chart class="canvas" :options="option" :style="{width:'50%',height:'20vh'}"></chart> -->
                        <div class="text-list">
                            <div class="t-body">
                            <div class="full-score">
                                <span class="circle"></span>
                                满分：{{low.score}}分
                            </div>
                            <div class="average-score">
                                <span class="circle"></span>
                                平均分：{{low.allAvg}}分
                            </div>
                            <div class="get-score">
                                <span class="circle"></span>
                                得分：{{low.stuAvg}}分
                                <span class="need-improve">{{low.standard}}</span>
                            </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="middle">
                    <div class="level">难度等级：中档题</div>
                    <div class="ratio ">
                        <div id="liquid-fill-middle" :style="{width:'45%',height:'18vh'}"></div>
                        <!-- <chart class="canvas" :options="middleOpt" :style="{width:'50%',height:'20vh'}"></chart> -->
                        <div class="text-list">
                            <div class="t-body">
                            <div class="full-score">
                                <span class="circle"></span>
                                满分：{{middle.score}}分
                            </div>
                            <div class="average-score">
                                <span class="circle"></span>
                                平均分：{{middle.allAvg}}分
                            </div>
                            <div class="get-score">
                                <span class="circle"></span>
                                得分：{{middle.stuAvg}}分
                                <span class="need-improve">{{middle.standard}}</span>
                            </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="height">
                    <div class="level">难度等级：高档题</div>
                    <div class="ratio ">
                        <div id="liquid-fill-height" :style="{width:'45%',height:'18vh'}"></div>
                        <!-- <chart class="canvas" :options="heightOpt" :style="{width:'50%',height:'20vh'}"></chart> -->
                        <div class="text-list">
                            <div class="t-body">
                                <div class="full-score">
                                    <span class="circle"></span>
                                    满分：{{height.score}}分
                                </div>
                                <div class="average-score">
                                    <span class="circle"></span>
                                    平均分：{{height.allAvg}}分
                                </div>
                                <div class="get-score">
                                    <span class="circle"></span>
                                    得分：{{height.stuAvg}}分
                                    <span class="need-improve">{{height.standard}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>

            <!-- <div class="next-div"> -->
                <next />
            <!-- </div> -->
            <div class="footer">
                <logo />
            </div>
        </div>
        <!-- <div class="footer">
            <logo />
        </div> -->
    </div>
</template>
<script>
import Logo from '../common/Logo.vue'
import Next from '../common/Next.vue'

import io from '../../lib/io'
import util from '../../lib/util'
// import  'echarts-liquidfill/src/liquidFill.js'
import  '../../lib/echarts/echarts-liquidfill.js'
export default {
    components: {
        Logo,
        Next,
    },
    data() {
        return {
            option: {
                series: [
                    {
                        type: 'liquidFill',
                        radius:'60%',
                        label: {
                            normal: {
                                show: false,
                            },
                        },
                        // data: [
                        //     {name:'得分', value: 335,itemStyle:{color:'#fda99c'} },
                        //     { name:'剩余',value: 310,itemStyle:{color:'#ffe5e0'}  },
                        // ]
                        data:[0.4]
                    }
                ]
            },
            reportId:'',
            sysCode:"",
            low:{},
            middle:{},
            height:{},
        }
    },
    created(){
        this.reportId = this.$route.query.reportId
        this.sysCode = util.getSysCode(this.$route.query.areamTeamId)

        // this.reportHard()
    },
    mounted(){
        this.reportHard()
        
    },
    methods:{
        liquidFill (id,value,color,backgroundColor,){//方法
        // console.log(value)
           var liquid = this.$echarts.init(document.getElementById(id));
           liquid.setOption({
                series: [{
                    type: 'liquidFill',//类型
                    data: [{
                            value: value.stuAvg/value.score,
                            direction: 'left',
                            itemStyle: {
                                normal: {
                                    color: color.stu
                                }
                            }
                        },
                        ],//数据是个数组 数组的每一项的值是0-1
                    outline: {
                        show: true , //是否显示轮廓 布尔值
                        // borderDistance: 0, //外部轮廓与图表的距离 数字
                        itemStyle:{
                            borderColor: color.stu, //边框的颜色
                            borderWidth: 5,  //边框的宽度
                            //shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
                            //shadowColor: '#000' //外部轮廓的阴影颜色 
                        }
                    },
                    label:{
                        show:false,
                    },
                    backgroundStyle: {
                        color:'#fff',//图表的背景颜色
                        borderWidth: '10',//图表的边框宽度
                        // borderColor: '#ccc',//图表的边框颜色
                        itemStyle: {
                            shadowBlur:100,//设置无用
                            shadowColor: '#f60',//设置无用
                            opacity: 1 //设置无用
                        }    
                    },
                    itemStyle: {
                        opacity:1,//波浪的透明度
                        shadowBlur: 10,//波浪的阴影范围
                        shadowColor:'#fff'//阴影颜色
                    },
                   
                    // color: ['#ccc','red','blue',],//水波的颜色 对应的是data里面值
                    shape: 'circle',//水填充图的形状 circle默认圆形  rect圆角矩形  triangle三角形  diamond菱形  pin水滴状 arrow箭头状  还可以是svg的path
                    center: ['50%','50%'],//图表相对于盒子的位置 第一个是水平的位置 第二个是垂直的值 默认是[50%,50%]是在水平和垂直方向居中 可以设置百分比 也可以设置具体值
                    radius: '70%', //图表的大小 值是圆的直径 可以是百分比 也可以是具体值 100%则占满整个盒子 默认是40%; 百分比下是根据宽高最小的一个为参照依据
                    amplitude:'5%',   //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
                    waveLength:'80%',//波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
                    phase:0 ,//波的相位弧度 默认情况下是自动
                    // period: (value,index)=>{//控制波的移动速度 可以是函数 也可以是数字 两个参数  value 是data数据里面的值 index 是data值的索引

                    //     return index*2000;
                    // },
                    // direction: 'left',//波移动的速度 两个参数  left 从右往左 right 从左往右
                    // waveAnimation: true, //控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
                    // animationEasing: 'linear',//初始动画
                    // animationEasingUpdate: 'quarticInOut',//数据更新的动画效果
                    // animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
                    // animationDurationUpdate : 300 //数据更新动画的时长

                }],
                //backgroundColor: 'rgba(255,0,0,0.1)'容器背景颜色
           })
       },
        reportHard(){
            let param = {
                reportId:this.reportId,
                sysCode:this.sysCode
            }
            io.post(io.reportHard,param,(ret)=>{
                if(ret.success){
                    let data = ret.data
                    let low = {}
                    let middle = {}
                    let height  = {}
                    data.map((item)=>{
                        if(item.hard===1){
                            low = item
                        }else if(item.hard===2){
                            middle = item
                        }else{
                            height = item
                        }
                    })
                    this.low = low
                    this.middle = middle
                    this.height = height
                    // console.log(ret)
                    this.liquidFill('liquid-fill-low',this.low,{stu:'#f96b60',avg:"#ffb6a5"},'#ffe5e0',)
                    this.liquidFill('liquid-fill-middle',this.middle,{stu:'#39ccac',avg:'#a8e8da'},'#d7f5ee')
                    this.liquidFill('liquid-fill-height',this.height,{stu:'#4966fe',avg:'#9dadfe'},'#cbd4fe')
                }else{
                    alert(ret.desc)
                }
            })
        }
    },
    // computed:{
    //     lowOpt(){
    //         return this.option
    //     },
    //     middleOpt(){
    //         let opt=JSON.parse(JSON.stringify(this.option))
    //         opt.series[0].data[0].itemStyle.color='#a8e8da'
    //         opt.series[0].data[1].itemStyle.color='#d7f5ee'
    //         return opt
    //     },
    //     heightOpt(){
    //         let opt=JSON.parse(JSON.stringify(this.option))
    //         opt.series[0].data[0].itemStyle.color='#9dadfe'
    //         opt.series[0].data[1].itemStyle.color='#cbd4fe'
    //         return opt
    //     }
    // }
}
</script>
<style lang="less" scoped>
.report-three {
    height: 100%;
    background: #edf5ff;
    position: relative;
    .header {
        height: 2.5rem;
        background: url('../../assets/img/rep-bg.png');
    }
}

.body {
    background: white;
    width: 90%;
    margin-left: 5%;
    min-height: 90vh;
    position: absolute;
    top: 3vh;
    border-radius: 0.1rem;
    margin-bottom: 0.6rem;
    box-shadow: 0px 5px 18px 0px rgba(189, 217, 253, 0.5);
    h4 {
        height: 0.4rem;
        font-size: 0.4rem;
        line-height: 0.4rem;
        font-weight: normal;
        color: #ff7853;
        margin-top: 0.4rem;
        margin-left: 0.44rem;
        margin-bottom: 0.2rem;
        span {
            font-size: 0.52rem;
            height: 0.4rem;
            line-height: 0.4rem;
            font-weight: normal;
            display: inline-block;
            color: #74a5e1;
            padding-right: 0.22rem;
            border-right: 3px solid #74a5e1;
            font-weight: 100;
            float: left;
            margin-right: 0.2rem;
        }
    }
    .list {
        padding: 0.3rem 0.3rem 0.28rem 0.3rem;
        
        .level {
            color: #74a5e1;
            font-size: 0.28rem;
            font-weight: bold;
            padding-left: 0.2rem;
        }
        .ratio{
            display: flex;
            margin-bottom: 0.1rem;
            .canvas{
                width: 3rem;
            }
        }
        li{
            padding-top: 0.3rem;
            &:first-child{
                padding-top: 0;
            }
        }
        .text-list{
            flex: 1;
            font-size: 0.28rem;
            color: #333;
            line-height: 0.4rem;
            display: flex;
            align-items: center;
            position:relative;
            top:0.1rem;
            .need-improve{
                color: #ff5501;
            }
            .circle{
                display: inline-block;
                width: 0.18rem;
                height: 0.18rem;
                border-radius: 50%;
            }
            .full-score{
                .circle{
                    background: #ffe5e0;
                }
            }
            .average-score{
                .circle{
                    background: #ffb6a5;
                }
            }
            .get-score{
                .circle{
                    background: #f96b60;
                }
            }
        }
        .middle{
            border-top: 2px dashed #b9b9b9; 
            .full-score{
                .circle{
                    background: #d7f5ee;
                }
            }
            .average-score{
                .circle{
                    background: #a8e8da;
                }
            }
            .get-score{
                .circle{
                    background: #39ccac;
                }
            }
        }
        .height{
            border-top: 2px dashed #b9b9b9; 
            .full-score{
                .circle{
                    background: #cbd4fe;
                }
            }
            .average-score{
                .circle{
                    background: #9dadfe;
                }
            }
            .get-score{
                .circle{
                    background: #4966fe;
                }
            }
        }
    }
}

.footer {
    position: absolute;
    bottom: -0.57rem;
    width: 100%;
    text-align: center;
}
</style>
